import React, { useState } from 'react';
import { List, Card, Space, Button, Tag } from 'antd';
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import { useUser } from '../../contexts/UserContext';
import { IArticle } from '../../types';

const mockArticles: IArticle[] = [
    {
        id: '1',
        title: 'React 18新特性详解',
        content: '# React 18新特性详解\n\n## 1. 自动批处理\n\nReact 18 中新增了自动批处理...',
        author: {
            id: '1',
            username: 'admin',
            avatar: 'https://joeschmoe.io/api/v1/random'
        },
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
        likes: 128,
        comments: 32,
        tags: ['React', '前端']
    },
    {
        id: '2',
        title: 'TypeScript最佳实践',
        content: '# TypeScript最佳实践\n\n## 1. 类型定义\n\nTypeScript 中的类型定义...',
        author: {
            id: '1',
            username: 'admin',
            avatar: 'https://joeschmoe.io/api/v1/random'
        },
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
        likes: 98,
        comments: 25,
        tags: ['TypeScript', '教程']
    }
];

const ArticleList: React.FC = () => {
    const [articles] = useState<IArticle[]>(mockArticles);
    const { user } = useUser();
    const navigate = useNavigate();

    return (
        <div>
            <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
                <h2>文章列表</h2>
                {user && (
                    <Button type="primary" onClick={() => navigate('/articles/new')}>
                        写文章
                    </Button>
                )}
            </div>
            <List
                grid={{ gutter: 16, column: 1 }}
                dataSource={articles}
                renderItem={(article) => (
                    <List.Item>
                        <Card
                            title={
                                <Link to={`/articles/${article.id}`} style={{ color: 'inherit' }}>
                                    {article.title}
                                </Link>
                            }
                            actions={[
                                <Link to={`/articles/${article.id}`} key="view">
                                    <EyeOutlined /> 查看
                                </Link>,
                                ...(user?.id === article.author.id ? [
                                    <Link to={`/articles/edit/${article.id}`} key="edit">
                                        <EditOutlined /> 编辑
                                    </Link>,
                                    <Button type="link" danger key="delete">
                                        <DeleteOutlined /> 删除
                                    </Button>
                                ] : [])
                            ]}
                        >
                            <Space direction="vertical" size="small">
                                <div>{article.content.substring(0, 200)}...</div>
                                <Space size={[0, 8]} wrap>
                                    <Tag color="blue">{article.author.username}</Tag>
                                    <Tag color="green">
                                        {new Date(article.createdAt).toLocaleDateString()}
                                    </Tag>
                                </Space>
                            </Space>
                        </Card>
                    </List.Item>
                )}
            />
        </div>
    );
};

export default ArticleList; 